<template>
    <div class="allbuju">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="所有订单" name="first">
        <div  class="all">
         <div class="div">
            <p>日常清洁</p>
            <img src="@/assets/clear1.jpg">
            <span>￥79</span>
            <el-row class="mb-4 right">
                <el-button type="warning" round>再来一单</el-button>
                <el-button type="warning" round>评价</el-button>
            </el-row>
        </div>
         <div class="div">
            <p>深度清洁</p>
            <img src="@/assets/clear2.jpg">
            <span>￥199</span>
            <el-row class="mb-4 right">
                <el-button type="warning" round>再来一单</el-button>
                <el-button type="warning" round>评价</el-button>
            </el-row>
        </div>
         <div class="div">
            <p>体验清洁</p>
            <img src="@/assets/clear3.jpg">
            <span>￥29.9</span>
            <el-row class="mb-4 right">
                <el-button type="warning" round>再来一单</el-button>
                <el-button type="warning" round>评价</el-button>
            </el-row>
        </div>
        </div>
    </el-tab-pane>
    <el-tab-pane label="待评价" name="second">
        <div  class="all">
         <div class="div">
            <p>日常清洁</p>
            <img src="@/assets/clear1.jpg">
            <div class="demo-rate-block">     
                <el-rate v-model="value1" />
            </div>
        </div>
         <div class="div">
            <p>深度清洁</p>
            <img src="@/assets/clear2.jpg">
            <div class="demo-rate-block">
                <el-rate v-model="value1" />
            </div>
        </div>
         <div class="div">
            <p>体验清洁</p>
            <img src="@/assets/clear3.jpg">
            <div class="demo-rate-block">
                <el-rate v-model="value1" />
            </div>
        </div>
        </div>
 
    </el-tab-pane>

  </el-tabs>
        
        <div id="flex">
            <div class="xiabiao" @click="icons('1')" >
               
                <i class="fa-solid fa-house-user"></i>
                <span>首页</span>
            </div>
            <div class="xiabiao click" @click="icons('2')">
               <i class="fa-solid fa-list"></i>
                <span>订单</span>
            </div>
            <div class="xiabiao" @click="icons('3')">
                <i class="fa-regular fa-circle-user"></i>
                <span>客服</span>
            </div>
        </div>
    </div>
</template>



<script >
import { ref } from 'vue'
export default {
  name: 'everydaybaojie',
  data(){
      return{
        activeName:ref('first')
      }
  },
   methods:{
       icons(id){
           if(id==='1'){
                this.$router.replace('/baomubaojie')

           }else if(id=='2'){
               this.$router.replace('/dingdan')
           }else{
               this.$router.replace('/wo')
           }
       }
   }
}
</script>
<style scoped>
.all{
   
    background-color: rgb(252, 246, 225);
}
.div{
    font-size: 0.8rem;
    width: 90%;
    height: auto;
    margin:5px auto;
    border: 1px solid #6b778c;
    border-radius: 0.5rem;
background-color: rgb(255, 255, 255);

}
.div p{
    margin: 5px 5px 5px 10px;
}
.div img{
    margin-left: 10px;
    width: 70px;
    height: 70px;
}
.div span{
    font-size: 1.5rem;
    position: absolute;
    left: 300px;
/* margin-bottom: 20px; */
}
.div .right{
    position: relative;
    left: 180px;
}
#flex{
    bottom: 0;
    height: 80px;
    width: 390px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    text-align: center;
    font-size: 20px;
    position: fixed;

}
.xiabiao{
    padding: 10px;
  /* border: 1px solid rgb(221, 221, 221); */
  background-color: rgb(242, 239, 239);
}
.xiabiao i{
     font-size: 30px;
     display: block;
}
.icon{
        color: rgb(255, 92, 33);
}
.xiabiao span{
    color: rgb(138, 134, 134);
   font-family: 'Courier New', Courier, monospace;
}
.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
.demo-rate-block:last-child {
  border-right: none;
}
.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.click{
    color: rgb(255, 92, 33);
    
}
.click span{
    color: rgb(255, 92, 33);
    
}
</style>